<template>
  <div class="box1">
    <div class="box-item">
      <img
        class="image"
        src="https://emos-1315580987.cos.ap-nanjing.myqcloud.com/img/sumo/algorithm2/wait1.png"
        alt=""
      />
      <h3>图一：低交通流下的平均等待时间</h3>
    </div>
    <div class="box-item">
      <img
        class="image"
        src="https://emos-1315580987.cos.ap-nanjing.myqcloud.com/img/sumo/algorithm2/wait2.png"
        alt=""
      />
      <h3>图二：正常交通流下的平均等待时间</h3>
    </div>
    <div class="box-item">
      <img
        class="image"
        src="https://emos-1315580987.cos.ap-nanjing.myqcloud.com/img/sumo/algorithm2/wait3.png"
        alt=""
      />
      <h3>图三：高峰交通流下的平均等待时间</h3>
    </div>
    <div class="box-item">
      <img
        class="image"
        src="https://emos-1315580987.cos.ap-nanjing.myqcloud.com/img/sumo/algorithm2/queue1.png"
        alt=""
      />
      <h3>图四：低交通流下的平均队列长度</h3>
    </div>
    <div class="box-item">
      <img
        class="image"
        src="https://emos-1315580987.cos.ap-nanjing.myqcloud.com/img/sumo/algorithm2/queue2.png"
        alt=""
      />
      <h3>图五：正常交通流下的平均队列长度</h3>
    </div>
    <div class="box-item">
      <img
        class="image"
        src="https://emos-1315580987.cos.ap-nanjing.myqcloud.com/img/sumo/algorithm2/queue3.png"
        alt=""
      />
      <h3>图六：高峰交通流下的平均队列长度</h3>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
</script>

<style scoped lang="scss">
.box1 {
  display: flex;
  flex-wrap: wrap;
  .box-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    .image {
      display: block;
      width: 380px;
    }
  }
}
</style>
